<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
    <title>报名系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="shortcut icon" type="image/x-icon" href="/ldbm/Public/imgs/favicon.ico" media="screen" />
    <link rel="stylesheet" href="/ldbm/Public/lib/weui.min.css">
    <link rel="stylesheet" href="/ldbm/Public/css/jquery-weui.css">

</head>

<body ontouchstart>


<header class='demos-header'>
    <h1 class="demos-title">报名系统</h1>
</header>

<div class="weui-cells__title">表单</div>
<form action="index.html">


    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="name" class="weui-label">类别一</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="cat1" type="text" placeholder="选择类别一" value="">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="name" class="weui-label">后选择</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="cat2" type="text" placeholder="选择类别二" value="">
            </div>
        </div>
        <div class="weui-cells__tips" id="remark">请选择类别</div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">节目名称</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="节目名称">
            </div>
        </div>

    </div>
    <div class="weui-cells__tips" id="">底部说明文字底部说明文字</div>



    <div class="weui-cells__title">开关</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__bd">标题文字</div>
            <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox">
            </div>
        </div>
        <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__bd">兼容IE Edge的版本</div>
            <div class="weui-cell__ft">
                <label for="switchCP" class="weui-switch-cp">
                    <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
                    <div class="weui-switch-cp__box"></div>
                </label>
            </div>
        </div>
    </div>

    <div class="weui-cells__title">文本框</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入文本">
            </div>
        </div>
    </div>

    <div class="weui-cells__title">文本域</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
                <div class="weui-textarea-counter"><span>0</span>/200</div>
            </div>
        </div>
    </div>

    <div class="weui-cells__title">选择</div>
    <div class="weui-cells">

        <div class="weui-cell weui-cell_select weui-cell_select-before">
            <div class="weui-cell__hd">
                <select class="weui-select" name="select2">
                    <option value="1">+86</option>
                    <option value="2">+80</option>
                    <option value="3">+84</option>
                    <option value="4">+87</option>
                </select>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码">
            </div>
        </div>
    </div>
    <div class="weui-cells__title">选择</div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
            <div class="weui-cell__bd">
                <select class="weui-select" name="select1">
                    <option selected="" value="1">微信号</option>
                    <option value="2">QQ号</option>
                    <option value="3">Email</option>
                </select>
            </div>
        </div>
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">国家/地区</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" name="select2">
                    <option value="1">中国</option>
                    <option value="2">美国</option>
                    <option value="3">英国</option>
                </select>
            </div>
        </div>
    </div>

    <label for="weuiAgree" class="weui-agree">
        <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
        <span class="weui-agree__text">
        阅读并同意<a href="javascript:void(0);">《相关条款》</a>
      </span>
    </label>

    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
    </div>

</form>


<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="/ldbm/Public/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script src="/ldbm/Public/js/jquery-weui.js"></script>

<script>
    $("#cat1").select({
        title: "选择类别",
        items: [
            {
                title: "“小朗诵家”语言类",
                value: "1",
            },
            {
                title: "“最美童声”争霸赛声乐类",
                value: "2",
            },
            {
                title: "“小舞蹈家”舞蹈类",
                value: "3",
            }
        ],
        onChange: function(d) {


        },
        onClose: function(d) {
            $("#remark").html("选了"+d.data.values);

            $.ajax({
                type: "POST",
                url: "/ldbm/index.php/Home/Index/getcates",
                data: "",
                jsonp:'callback',
                success: function (data) {
                    $("#remark").html('doajax');
                    select2(data);
                },
                error: function (request, error) {
                    $("#remark").html(error);
                }
            })

        },
        onOpen: function() {
            console.log("open");
        },
    });

    function select2(iterms){
        $("#remark").html('doajax');
        $("#cat2").select({
            title: "选择类别",
            items: iterms,
            onChange: function(d) {

                console.log('change');
            },
            onClose: function(d) {
                console.log(d.data.values);
                $("#remark").html(d.data.values);
                $.each(
                    iterms,
                    function (i, n) {
                        if(n.value === d.data.values){
                            $("#remark").html('注：'+n.remark);
                        }
                    }

                )

            },
            onOpen: function() {
                console.log("open");
            },
        });

    }



</script>

</body>
</html>